<template>
<div id="lovers">
<!--  https://blog.csdn.net/qq_40976321/article/details/98210370-->
  <a-table :columns="columns" :data-source="lovers" :key="columns.length">
    <div slot="id" slot-scope="id,record" >
      <!--                    <a-tag color="#2db7f5" @click="$router.push('/Detail')">-->
      <a-tag color="#2db7f5">
        {{id}}
      </a-tag>
    </div>
    <img slot="pic" slot-scope="pic" :src="pic">


    <span slot="action" slot-scope="record">

          <a-popconfirm

            title="Sure to delete?"
            @confirm="() => onDelete(record)"
          >
          <a href="javascript:;">Delete</a>
        </a-popconfirm>
      <a-divider type="vertical"/>
<!--      注意 <div slot="id" slot-scope="id,record"的作用 >-->
      <a class="ant-dropdown-link" @click="onEdit(record.id)"> Edit </a>
    </span>
  </a-table>
</div>
</template>

<script>

    export default {
        name: "lover",
      data(){
          return{
            lovers:[],
            columns :[
              {
                title: 'ID',
                dataIndex: 'id',
                key: 'id',
                slots: {title: 'id'},
                scopedSlots: {customRender: 'id'}

              },
              {
                title: '头像',
                dataIndex: 'pic',
                key: 'pic',
                slots: {title: 'pic'},
                scopedSlots: {customRender: 'pic'}
              },

              {
                title: '芳名',
                dataIndex: 'name',
                key: 'name',
              },
              {
                title: '价格',
                dataIndex: 'price',
                key: 'price',
              },
              {
                title: '类型',
                dataIndex: 'type',
                key: 'type',
              },
              {
                title: '生日',
                dataIndex: 'birthday',
                key: 'birthday',
              },
              {
                title: 'Action',
                key: 'action',
                scopedSlots: { customRender: 'action' },
              },
            ],
          }
      },
      methods:{
          getAllLovers(){
            this.$http({
              url: "/lover/all",
              method: "get",
              // params: {
              //   veid: 123321,
              //   api_key: "xxxxxxxxxxxx"
              // }
            }).then(res => {
              console.log(res.data);
              this.lovers=res.data
            });

          },
        onEdit(id){
            console.log("ready edit lover",id)
          this.$http({
            url: "/lover/get",
            method: "get",
            params: {
              id: id,

            }
          }).then(res => {
            console.log(res.data);
            let lover=res.data
            this.$router.push(
              {
                name:'editLover',
                params:lover
              }
            )
          });
        },
        onDelete(record){
          // const dataSource = [...this.lovers];
          // let t = dataSource.filter(item => item.key !== key);
          console.log("del ",record)
          let id=record.id;
          this.$http({
            url: "/lover/del",
            method: "get",
            params: {
              id: id,

            }
          }).then(res => {
            console.log(res.data);
            let lover=res.data
            // this.$router.push(
            //   {
            //     name:'lover',
            //     // params:lover
            //   }
            // )
            this.getAllLovers();
          });
        },
      },

      mounted() {
          this.getAllLovers()
      }
    }
</script>

<style scoped>
#lovers img{
  width: 80px;
  border-radius: 10px;
}
</style>
